<template>
  <a-modal :title="title" :width="850" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="moduleId" label="模块">
          <a-select v-model="model.moduleId" placeholder="模块" show-search @change="mkchange">
            <a-select-option :value="item.id" v-for="item in mkList" :key="item.id"> {{ item.name }} </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" required label="类别名称">
          <a-input placeholder="请输入" v-model="model.name" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort" required label="排序">
          <!-- <a-input placeholder="数字越小越靠前" v-model="model.sort" /> -->
          <a-input-number v-model="model.sort" :min="1" placeholder="数字越小越靠前" style="width: 534px" />
          <div style="color: #f59a23">输入大于0的整数</div>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="iconUrl"
          required
          label="首页icon"
          v-if="model.moduleName == '业绩为王' || model.moduleName == '江南加油站' || model.moduleName == '形象之星' || model.moduleName == '明星风采'"
        >
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImageChange" v-model="model.iconUrl"></JImageUpload>
          <div class="upload__tip" style="line-height: 16px">支持jpg/png/gif格式,最多1张,建议尺寸:534*360</div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tabUrl" required label="tab栏图" v-if="model.moduleName == '形象之星' || model.moduleName == '江南加油站'">
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImageChange1" v-model="model.tabUrl"></JImageUpload>
          <div class="upload__tip" style="line-height: 16px">支持jpg/png/gif格式,最多1张,建议尺寸:534*360</div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" required label="状态">
          <a-radio-group v-model="model.status" name="radioGroup">
            <a-radio :value="0">启用</a-radio>
            <a-radio :value="1">禁用</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import globalData from '@/assets/js/common'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { queryModuleList, saveOrUpdateCategory } from '@/api/marketingCenter/dealer'

export default {
  name: 'banner',
  components: { JImageUpload },
  data() {
    return {
      mkList: [],
      title: '',
      visible: false,
      model: {
        status: 0
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        moduleId: [{ required: true, message: '请选择!' }],
        iconUrl: [{ required: true, message: '请上图片', trigger: ['blur', 'change'] }],
        tabUrl: [{ required: true, message: '请上图片', trigger: ['blur', 'change'] }],
        sort: [{ required: true, message: '请输入!' }],
        name: [{ required: true, message: '请输入!' }],
        status: [{ required: true, message: '请选择!' }]
      }
    }
  },
  methods: {
    getqueryModuleList() {
      queryModuleList().then(res => {
        if (res.code == 200) {
          this.mkList = res.data
        }
      })
    },
    add() {
      this.getqueryModuleList()
      this.edit({
        iconUrl: [],
        tabUrl: [],
        status: 0
      })
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    mkchange() {
      let mkList = this.mkList
      mkList.forEach(el => {
        if (el.id == this.model.moduleId) {
          this.model.moduleName = el.name
        }
      })
    },
    fileImageChange(list) {
      console.log(list)
      if (list.length != 0 && list[0].url !== undefined) {
        this.model.iconUrl = list[0].url
      } else {
        this.model.iconUrl = ''
      }
    },
    fileImageChange1(list) {
      if (list.length != 0 && list[0].url !== undefined) {
        this.model.tabUrl = list[0].url
      } else {
        this.model.tabUrl = ''
      }
    },
    // 确定
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let data = {}
          Object.assign(data, this.model)
          console.log(Array.isArray(data.iconUrl))
          if (Array.isArray(data.iconUrl)) {
            data.iconUrl = data.iconUrl.join(',')
          }
          if (Array.isArray(data.tabUrl)) {
            data.tabUrl = data.tabUrl.join(',')
          }
          delete data.moduleName
          saveOrUpdateCategory(data)
            .then(res => {
              console.log(res)
              if (res.success) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>
